<template>
  <div style="display: inline-block;">
    <el-button type="text" icon="el-icon-printer" @click="open"></el-button>
    <el-dialog title="标签打印" :visible.sync="show" append-to-body :width="settingShow?'1200px':'600px'">
      <div class="qrcode-main" ref="content">
        <div class="qrcode-pno">{{ form.pno }}</div>
        <div class="qrcode-pno">{{ form.qrcode }}</div>
        <!-- <div class="qrcode-qrcode">{{form.qrcode}}</div> -->
        <div class="qrcode-content">
          <div>物品名称:{{ form.name }}</div>
          <div>移交单位:{{ form.officeName }}</div>
          <div>存放位置:{{
              (form.areaName ? form.areaName + '/' : '')
              + (form.groupName ? form.groupName + '/' : '')
              + (form.cabinetName ? form.cabinetName + '/' : '')
              + (form.locatorName ? form.locatorName : '')
            }}
          </div>
          <div>入库时间:{{ form.updateTime }}</div>
        </div>
        <!-- <div class="qrcode-content" style="vertical-align: text-bottom;">
          <div>{{form.areaName}}/{{form.locatorName}}</div>
          <div>{{updateTime}}</div>
        </div> -->
        <div class="qrcode-img">
          <el-image :src="getQrcode(form.pno)" style="width: 120px;height: 120px;"></el-image>
        </div>
      </div>
      <el-row class="mt10">
        <el-col :span="18">
          <el-button type="primary" @click="printPlain(form.id)" class="fr">打印普通标签</el-button>
        </el-col>
        <el-col :span="6">
          <!-- <el-select id="enum_list" v-model="printVal" class="fl">
            <el-option
              v-for="item in prints"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-button type="primary" @click="connect" class="fl ml10">连接打印机</el-button> -->
          <!-- <el-button type="info" @click="settingOpen" class="fl">RFID设置</el-button> -->
          <el-button type="primary" @click="printOne(form.id)" class="fr">打印RFID标签</el-button>
        </el-col>
      </el-row>
      <el-card class="mt10" v-if="settingShow">
        <div slot="header" class="clearfix">
          <span>设置</span>
        </div>
        <el-form label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="设置RFID功率">
                <el-input placeholder="请输入RFID功率" v-model="rfidPowerVal"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" class="ml10" @click="setRfidPower('read')">设置读取功率</el-button>
              <el-button type="primary" @click="setRfidPower('write')">设置写入功率</el-button>
              <el-button type="primary" @click="getRfidPower('read')">获取读取功率</el-button>
              <el-button type="primary" @click="getRfidPower('write')">获取写入功率</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="写入EPC数据">
                <el-input placeholder="请输入EPC数据" style="width: 150%;" v-model="epcVal"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-radio-group v-model="radioVal">
                  <el-radio label="string"></el-radio>
                  <el-radio label="hex"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" class="ml10" @click="setRfidWriteEPC(false,'string')">动态写入数据</el-button>
              <el-button type="primary" @click="getRfidReadEPC(false,'string')">动态读取数据</el-button>
              <el-button type="primary" @click="setRfidWriteEPC(true,'string')">静态写入数据</el-button>
              <el-button type="primary" @click="getRfidReadEPC(true,'string')">静态读取数据</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-dialog>
    <el-drawer :visible.sync="isOpen" append-to-body :before-close="printClose" size="50%" :loading="isLoading">
      <div class="mainDiv">
        <el-container class="main_container">
          <el-main>
            <el-progress :text-inside="true" :stroke-width="24" :percentage="finishes" status="success"></el-progress>
            <template v-for="(item,ind) in dataList">
              <div style="float: left;margin: 10px;">
                <div class="qrcode-main" :ref="'content'+ind">
                  <div class="qrcode-pno">{{ item.pno }}</div>
                  <div class="qrcode-pno">{{ item.qrcode }}</div>
                  <div class="qrcode-content">
                    <div>物品名称:{{ item.name }}</div>
                    <div>移交单位:{{ item.officeName }}</div>
                    <div>存放位置:{{
                        (item.areaName ? item.areaName + '/' : '')
                        + (item.groupName ? item.groupName + '/' : '')
                        + (item.cabinetName ? item.cabinetName + '/' : '')
                        + (item.locatorName ? item.locatorName : '')
                      }}
                    </div>
                    <div>入库时间:{{ item.updateTime }}</div>
                  </div>
                  <div class="qrcode-img">
                    <el-image :src="getQrcode(item.pno)" style="width: 120px;height: 120px;"></el-image>
                  </div>
                </div>
              </div>
            </template>
          </el-main>
          <el-footer>
            <div class="footerDivClass">
              <el-button type="primary" @click="printMultiple()" :loading="buttonLoading">打 印</el-button>
              <el-button @click="printClose()">取 消</el-button>
            </div>
          </el-footer>
        </el-container>
      </div>

    </el-drawer>
  </div>
</template>

<script>
const _hex2bin = function(hex) {
  let length = hex.length
  let bin = []
  for (let i = 0; i < length; i = i + 2) {
    let h = 0, l = 0
    if (hex[i] >= 0 && hex[i] <= 9) {
      h = hex[i].charCodeAt() - 48
    } else {
      h = hex[i].charCodeAt() - 55
    }
    if (hex[i + 1] >= 0 && hex[i + 1] <= 9) {
      l = 0 + hex[i + 1].charCodeAt() - 48
    } else {
      l = hex[i + 1].charCodeAt() - 55
    }
    let b = h * 16 + l
    bin.push(b)
  }
  return bin
}
const _bin2hex = function(src) {
  let hex = []
  let length = src.length
  for (let i = 0; i < length; i++) {
    let b = String.fromCharCode(src[i]).charCodeAt()
    let h = (b & 0xF0) >> 4
    let l = (b & 0x0F)
    if (h < 10) {
      h = h + 48
    } else {
      h = h + 55
    }
    hex.push(String.fromCharCode(h))
    if (l < 10) {
      l = l + 48
    } else {
      l = l + 55
    }
    hex.push(String.fromCharCode(l))
  }
  return hex.join('')
}
const _str2Hex = function(str) {
  let hexCharCode = []
  hexCharCode.push('')
  for (let i = 0; i < str.length; i++) {
    hexCharCode.push((str.charCodeAt(i)).toString(16))
  }
  return hexCharCode.join('')
}
const _hex2int = function(hex) {
  let len = hex.length, a = new Array(len), code
  for (let i = 0; i < len; i++) {
    code = hex.charCodeAt(i)
    if (48 <= code && code < 58) {
      code -= 48
    } else {
      code = (code & 0xdf) - 65 + 10
    }
    a[i] = code
  }
  return a.reduce(function(acc, c) {
    acc = 16 * acc + c
    return acc
  }, 0)
}
import { getScan, uploadFileToBase64 } from '@/api/system/oss'
import { URL, Apost } from '@/utils/print'
import html2canvas from 'html2canvas'
import getJpeg from '@/utils/html-jpeg'
import { countPrints } from '@/api/wms/putDtl'

export default {
  props: {
    datas: {
      type: [Object]
    },
    updateTime: {
      type: [String]
    },
    dataList: {
      type: [Array]
    },
    allPrint: {
      type: [Boolean]
    }
  },
  data() {
    return {
      show: false,
      buttonLoading: false,
      form: {},
      scan: undefined,
      printVal: undefined,
      rfidPowerVal: undefined,
      epcVal: undefined,
      radioVal: 'string',
      prints: [],
      draw_w: 95,
      draw_h: 50,
      settingShow: false,
      imageBase64: undefined,
      isOpen: false,
      finishes: 0,
      qrcodeList: [],

      isLoading: false
    }
  },
  watch: {
    datas: {
      handler(newVal) {
        // console.info('newVal====>',newVal)
        this.form = newVal
      },
      immediate: true
    },
    allPrint: {
      handler(newVal) {
        if (newVal) {
          // console.info('dataList====>',this.dataList)
        }
      },
      immediate: true
    },
    qrcodeList: {
      handler(newVal) {
        if (this.dataList) {
          let dataLength = this.dataList.length
          if (newVal.length == dataLength) {
            this.printList(newVal)
          }
        }
      },
      immediate: true
    }
  },
  mounted() {
    // this.list_prints()
  },
  updated() {
    // this.list_prints()
  },

  methods: {
    open() {

      if (this.form) {
        if (!this.form.locatorId) {
          this.$modal.msgWarning('请先选择库位！')
        } else {
          this.show = true
        }
      }
    },
    printOpen() {
      this.isOpen = true
    },
    getQrcode(qrcode) {
      let scan = process.env.VUE_APP_BASE_API + '/system/oss/getQRCode?content=' + qrcode
      return scan
    },
    printAll() {
      let dataLength = this.dataList.length
      let _this = this
      let printed = 0
      for (let i = 0; i < dataLength; i++) {
        this.$nextTick(function() {
          setTimeout(_this.list_prints(), 500)
          setTimeout(_this.download(_this.$refs['content' + i][0]), 500)
          printed = printed + 1
          _this.finishes = parseInt((printed * 100) / dataLength)
          console.info('finishes::', _this.finishes)
        })
      }
    },

    printMultiple() {
      let dataLength = this.dataList.length
      this.isLoading = true
      this.buttonLoading = true
      for (let i = 0; i < dataLength; i++) {
        // const resultContentJpeg =  this.getJpegUrl(this.$refs['content'+i][0]);
        // let form = new FormData()
        // form.append('file',resultContentJpeg)
        // qrcodeList.push(form);
        getJpeg(this.$refs['content' + i][0]).then(res => {
          console.info('res======>' + i, res)
          if (res) {
            this.qrcodeList.push(res)
          }
        })
      }

      // const result = qrcodeList.reduce((accumulatorPromise,next)=>{
      //   console.info('next====>',next)
      //   console.info('accumulatorPromise====>',accumulatorPromise)
      //     return accumulatorPromise.then(()=>{
      //       return this.printUpload(next);
      //     })
      // },Promise.resolve())

      // result.then(e=>{
      //   console.log('All Promises Resolved')
      // })
    },

    printList(Array) {
      let items = []

      function printUpload(item) {
        let form = new FormData()
        form.append('file', item)
        return new Promise((resolve, reject) => {
          setTimeout(function() {
            uploadFileToBase64(form).then(res => {
              if (res.data.img) {
                items.push(res.data.img)
                resolve(res.data.img)
              } else {
                this.$modal.msgError('生成打印图片失败，请重试！')
              }
            })
          }, 1200)
        })
      }

      let result = Array.reduce((accumulatorPromise, next) => {
        return accumulatorPromise.then(() => {
          return printUpload(next)
        })
      }, Promise.resolve())
      let _this = this
      result.then(e => {
        _this.printImage(items)
        console.log('All Promises Resolved')
      })
    },

   async printImage(items) {

      let dataLength = this.dataList.length
      let _this = this
      let printed = 0
      let ind = 0
      await _this.list_prints()

      function writeWithPno(item, pno, id) {
        return new Promise(async(resolve, reject) => {
          await _this.writeEPCWidthPno(item, pno)
          printed = printed + 1
          _this.finishes = parseInt((printed * 100) / dataLength)
          ind++
          countPrints({ 'id': id, 'printFlag': 1 })
          resolve(printed)
        })
      }

      let result = items.reduce((accumulatorPromise, next) => {
        return accumulatorPromise.then(() => {
          // _this.writeEPCWidthPno(next,_this.dataList[ind].pno)
          // printed = printed + 1;
          // _this.finishes = parseInt((printed*100)/dataLength);
          // ind ++;
          return writeWithPno(next, _this.dataList[ind].pno, _this.dataList[ind].id)
        })
      }, Promise.resolve())
      result.then(e => {
        _this.buttonLoading = false
        console.log('All Promises Resolved')
      })
      // for(var i=0;i<items.length;i++){
      //   console.info("result::",items[i])

      // }
    },
    async writeEPCWidthPno(imageBase64, pno) {
      let _this = this
      let device = _this.printVal
      console.info('writeEPC1', device)
      if (device != '') {
        let _thermal_rfid_write_epc_ = {
          command: '_thermal_cmd_engine_controler_',
          'device': device,
          printdirectly: 'true',
          func: 'rfid_dynmic_write_epc',
          data: _this.formatPno(pno.substring(5))
        }
        console.info('writeEPC3', _thermal_rfid_write_epc_)
        _this.consolePrint(imageBase64)
        await Apost(JSON.stringify(_thermal_rfid_write_epc_)).then(res => {
          console.info('writeEPC4::', res)
          if (res.data.code !== 0) {
            _this.$modal.msgError(res.data.msg)
            return false
          }
          console.info('writeEPC4::', res)
          _this.$modal.msg('动态EPC写入成功，开始打印')
          _this.thermalZplPrint(imageBase64)
          return true
        })
      } else {
        this.$modal.msgError('请先枚举设备后再操作！')
        return false
      }
    },

    printOne(id) {
      this.list_prints()
      let refs = this.$refs.content
      // console.info('one===>',refs)
      this.download(refs, id)
    },
    printPlain(id) {
      this.list_prints()
      let refs = this.$refs.content
      this.downloadPlain(refs, id)
    },
    // 调用后台接口form-data传file文件
    async download(refs, id) {
      let _this = this
      const resultContentJpeg = await getJpeg(refs)
      let form = new FormData()
      form.append('file', resultContentJpeg)
      new Promise((resolve, reject) => {
        uploadFileToBase64(form).then((res) => {
          console.info('res::', res)
          if (!res.data.img) {
            _this.$modal.msgError('生成打印图片失败，请重试！')
          } else {
            resolve(res.data.img)
          }
        })
      }).then(data => {
        console.log(data)
        _this.writeEPC(data)
        countPrints({ 'id': id, 'printFlag': 1 })
      }, err => {
        console.log(err)
      })
      // await uploadFileToBase64(form).then((res) => {
      //   console.info("res::",res);
      //   if(!res.data.img){
      //     this.$modal.msgError("生成打印图片失败，请重试！");
      //   }else{
      //     this.writeEPC(res.data.img)
      //   }
      // })
    },
    async downloadPlain(refs, id) {
      let _this = this
      const resultContentJpeg = await getJpeg(refs)
      let form = new FormData()
      form.append('file', resultContentJpeg)
      new Promise((resolve, reject) => {
        uploadFileToBase64(form).then((res) => {
          console.info('res::', res)
          if (!res.data.img) {
            _this.$modal.msgError('生成打印图片失败，请重试！')
          } else {
            resolve(res.data.img)
          }
        })
      }).then(data => {
        console.log(data)
        // _this.writeEPC(data)
        _this.thermalZplPrint(imageBase64)
        countPrints({ 'id': id, 'printFlag': 1 })
      }, err => {
        console.log(err)
      })
      // await uploadFileToBase64(form).then((res) => {
      //   console.info("res::",res);
      //   if(!res.data.img){
      //     this.$modal.msgError("生成打印图片失败，请重试！");
      //   }else{
      //     this.writeEPC(res.data.img)
      //   }
      // })
    },
    handleClose() {
      this.show = false
    },
    printClose() {
      this.isOpen = false
    },
    //1、枚举设备
   async list_prints() {
      this.isConnect = false
      let pack = {
        command: '_thermal_enum_printer_',
        require: 'usb'
      }
     await Apost(JSON.stringify(pack)).then(res => {
        console.info('list_prints::', res)
        // if (!isok) { this.$modal.msgError('通讯失败：' + JSON.stringify(res)); return }
        if (res.data.code != 0) {
          this.$modal.msgError(res.data.msg)
          return
        }
        let enum_list = []
        if (res.data.device.length > 0) {
          enum_list = res.data.device
          this.connect(enum_list[0])
        } else {
          // this.$modal.msgError(res.message);
        }
        this.prints = enum_list
      })
    },
    //2、连接打印机
    async connect(printVal) {
      this.printVal = printVal
      console.info('printVal::', printVal)
      //接口详情使用，可参考thermal_web_api.txt文件

      let pack = {
        command: '_thermal_cmd_engine_controler_',
        device: printVal,
        func: 'thermal_get_printer_status'
      }
      await Apost(JSON.stringify(pack)).then(res => {
        console.info('res::', res)
        // if (!isok) { this.$modal.msgError('通讯失败：' + JSON.stringify(res)); return }
        if (res.data.code != 0) {
          this.$modal.msgError(res.data.msg)
          return
        }
        //this.$modal.msgError('设备状态:' + JSON.stringify(res.state))

        //十六进制字符串转二进制数据
        let data = _hex2bin(res.data.recv_data)
        let dataleng = data.length
        let byte1 = data[dataleng - 4], byte2 = data[dataleng - 3], byte3 = data[dataleng - 2],
          byte4 = data[dataleng - 1]

        //二进制数据转十六进制字符串
        // this.$modal.msgError(_bin2hex(data))

        if ((byte1 & 0x02) == 0x02) {
          this.$modal.msgError('卡纸')
        }
        if ((byte1 & 0x10) != 0x10) {
          this.$modal.msgError('非联机')
        }
        if ((byte1 & 0x20) == 0x20) {
          this.$modal.msgError('缺纸')
        }
        if ((byte1 & 0x40) == 0x40) {
          this.$modal.msgError('切刀出错')
        }
        if ((byte1 & 0x80) == 0x80) {
          this.$modal.msgError('设备忙')
        }
        if ((byte2 & 0x08) == 0x08) {
          this.$modal.msgError('缓冲非空')
        }
        if ((byte3 & 0x01) == 0x01) {
          this.$modal.msgError('碳带出错')
        }
        if ((byte3 & 0x02) == 0x02) {
          this.$modal.msgError('打印头抬起')
        }

        if ((byte3 & 0x10) == 0x10) {
          this.$modal.msgError('切刀开')
        }

        if ((byte3 & 0x20) == 0x20) {
          this.$modal.msgError('电源复位')
        }
        if ((byte3 & 0x40) == 0x40) {
          this.$modal.msgError('打印头过热')
        }
      })
    },
    async writeEPC(imageBase64) {
      console.info('printVal::', this.printVal)
      let device = this.printVal
      console.info('writeEPC1', device)
      if (device != '') {
        console.info('writeEPC2')
        let pno = this.formatPno(this.form.pno.substring(5))

        let _thermal_rfid_write_epc_ = {
          command: '_thermal_cmd_engine_controler_',
          'device': device,
          printdirectly: 'true',
          func: 'rfid_dynmic_write_epc',
          data: pno
        }

        let _this = this
        console.info('writeEPC3', _thermal_rfid_write_epc_)
        this.consolePrint(imageBase64)
        await Apost(JSON.stringify(_thermal_rfid_write_epc_)).then(res => {
          console.info('writeEPC4::', res)
          // if (!isok) { this.$modal.msgError('通讯失败：' + JSON.stringify(res)); return }
          if (res.data.code !== 0) {
            _this.$modal.msgError(res.data.msg)
            return
          }
          console.info('writeEPC4::', res)
          _this.$modal.msg('动态EPC写入成功，开始打印')
          _this.thermalZplPrint(imageBase64)
        })
      } else {
        this.$modal.msgError('请先枚举设备后再操作！')
      }
    },

    consolePrint: function(imageBase64) {
      //直接打印（ 打印:'true' / 预览:'false' ）
      let printdirectly = 'true'
      let device = this.printVal
      //张纸宽度
      let draw_w = this.draw_w
      //页长
      let draw_h = this.draw_h
      let font_name = 'L'

      let pack = {
        command: '_thermal_zpl_print_',
        device: device,
        printdirectly: printdirectly,
        measurement_mode: 'mm',
        //重定义ZPL数据头(否则默认为: '^SEE:GB18030.DAT^CI26^CWL,E:simsun.fnt^CFL' )
        print_head: '^SEE:GB18030.DAT^CI26^CW' + font_name + ',E:simsun.fnt^CF' + font_name,
        print: []
      }

      //设置起始位置
      pack.print.push({ func: 'zpl_set_label_size', w: draw_w, l: draw_h })
      pack.print.push({ func: 'zpl_set_label_coordinate_orgin', x: 0, y: 0 })

      //打印base64图片
      pack.print.push({ func: 'zpl_add_image', x: 3, y: 0, w: 90, h: 46, src_data: imageBase64 })
      console.info('pack::', pack)
    },
    thermalZplPrint: function(imageBase64) {
      console.info('imageBase64::', imageBase64)
      let device = this.printVal

      if (device != '') {

        //直接打印（ 打印:'true' / 预览:'false' ）
        let printdirectly = 'true'

        //张纸宽度
        let draw_w = this.draw_w
        if (draw_w == '' || draw_w == null) {
          this.$modal.msgError('张纸宽度不能为空！')
          return
        }
        if (isNaN(draw_w) || draw_w < 0) {
          this.$modal.msgError('张纸宽度不能有其他字符！')
          return
        }
        //页长
        let draw_h = this.draw_h
        if (draw_h == '' || draw_h == null) {
          this.$modal.msgError('页长不能为空！')
          return
        }
        if (isNaN(draw_h) || draw_h < 0) {
          this.$modal.msgError('页长不能有其他字符！')
          return
        }
        let font_name = 'L'

        let pack = {
          command: '_thermal_zpl_print_',
          device: device,
          printdirectly: printdirectly,
          measurement_mode: 'mm',
          //重定义ZPL数据头(否则默认为: '^SEE:GB18030.DAT^CI26^CWL,E:simsun.fnt^CFL' )
          print_head: '^SEE:GB18030.DAT^CI26^CW' + font_name + ',E:simsun.fnt^CF' + font_name,
          print: []
        }

        //设置起始位置
        pack.print.push({ func: 'zpl_set_label_size', w: draw_w, l: draw_h })
        pack.print.push({ func: 'zpl_set_label_coordinate_orgin', x: 0, y: 0 })

        //打印base64图片
        pack.print.push({ func: 'zpl_add_image', x: 3, y: 2, w: 90, h: 46, src_data: imageBase64 })
        console.info('pack::', pack)
        if (pack.print.length > 0) {
          // on_link_device(pack, onback)
          Apost(JSON.stringify(pack)).then(res => {
            // if (!isok) { this.$modal.msgError('通讯失败：' + JSON.stringify(res)); return }
            if (res.data.code !== 0) {
              this.$modal.msgError(res.data.msg)
              return
            }
            if (printdirectly == 'true') {
              this.$modal.msgSuccess('ZPL打印成功')
            } else {
              this.$modal.msgSuccess(res.zpl)
            }
          })
        }
      } else {
        this.$modal.msgError('请先枚举设备后再操作！')
      }
    },
    formatPno(pno) {
      //JSTY
      if (pno.indexOf('28S') != -1) {
        pno = pno.replace('28S', '999')
      }
      if (pno.indexOf('05S') != -1) {
        pno = pno.replace('05S', '998')
      }
      if (pno.indexOf('25S') != -1) {
        pno = pno.replace('25S', '997')
      }
      if (pno.indexOf('24S') != -1) {
        pno = pno.replace('24S', '996')
      }
      if (pno.indexOf('81S') != -1) {
        pno = pno.replace('81S', '995')
      }
      if (pno.indexOf('21S') != -1) {
        pno = pno.replace('21S', '994')
      }
      if (pno.indexOf('26S') != -1) {
        pno = pno.replace('26S', '993')
      }
      if (pno.indexOf('29S') != -1) {
        pno = pno.replace('29S', '983')
      }
      if (pno.indexOf('04S') != -1) {
        pno = pno.replace('04S', '991')
      }
      if (pno.indexOf('23S') != -1) {
        pno = pno.replace('23S', '989')
      }
      if (pno.indexOf('30S') != -1) {
        pno = pno.replace('30S', '988')
      }
      if (pno.indexOf('27S') != -1) {
        pno = pno.replace('27S', '987')
      }
      if (pno.indexOf('00S') != -1) {
        pno = pno.replace('00S', '986')
      }
      if (pno.indexOf('02S') != -1) {
        pno = pno.replace('02S', '985')
      }
      if (pno.indexOf('03S') != -1) {
        pno = pno.replace('03S', '984')
      }
      return pno
    }

  }
}
</script>

<style>
.qrcode-main {
  border: 1px dashed #bbbbbb;
  border-radius: 15px;
  width: 430px;
  padding: 15px 25px;
  margin: 0 auto;
}

.qrcode-content {
  font-size: 16px;
  width: 73%;
  line-height: 30px;
  display: inline-block;
  font-weight: 900;
  color: #000000;
  font-family: "Helvetica", "PingFang SC", "Microsoft YaHei", arial, "Hiragino Sans GB", "Hiragino Sans GB W3";
}

.qrcode-pno {
  font-size: 18px;
  font-weight: 900;
  color: #000000;
  font-family: "Helvetica", "PingFang SC", "Microsoft YaHei", arial, "Hiragino Sans GB", "Hiragino Sans GB W3";
}

.qrcode-qrcode {
  font-size: 18px;
  font-weight: 900;
  color: #000000;
  font-family: "Helvetica", "PingFang SC", "Microsoft YaHei", arial, "Hiragino Sans GB", "Hiragino Sans GB W3";
}

.qrcode-img {
  width: 27%;
  display: inline-block;
}
</style>
